<!DOCTYPE html>
<html lang="zh-Hans-CN">
<head>
  <meta charset="UTF-8">
  <title>材质的纹理贴图</title>
</head>
<body onload="init()">
<script src="../three.min.js"></script>
<script>
  function init() {
    let renderer = new THREE.WebGLRenderer();
    renderer.setSize(400, 300);
    document.body.appendChild(renderer.domElement);
    renderer.setClearColor(0x000000)

    let scene = new THREE.Scene();

    let camera = new THREE.PerspectiveCamera(50, 400 / 300, 1, 10)
    camera.position.set(3, 3, 4);
    camera.lookAt(new THREE.Vector3(0, 0, 0));
    scene.add(camera);

    var light = new THREE.DirectionalLight(0xffffff);
    light.position.set(2, 10, 5);
    scene.add(light);


    let loader = new THREE.TextureLoader();

    /* 一张图
     --------------------------------------------------------------------
     loader.load('../img/0.png', function ( texture ) {
     var material = new THREE.MeshLambertMaterial({
     map: texture
     });
     let cube = new THREE.Mesh(
     new THREE.CubeGeometry(2, 2, 2),
     // new THREE.SphereGeometry(2, 22, 22),
     material
     );
     scene.add(cube);
     renderer.render(scene, camera);
     });
     ---------------------------------------------------------------------
     */

    // 6 张图
    function map6() {
      var materials = [];
      for (var i = 0; i < 6; ++i) {
        materials.push(new THREE.MeshBasicMaterial({
          map: loader.load('../img/' + i + '.png', function () {
            renderer.render(scene, camera);
          }),
          overdraw: true
        }))
      }

      let cube = new THREE.Mesh(
          new THREE.CubeGeometry(2, 2, 2),
          materials
      );
      scene.add(cube);
    }

    // map6()

    function gird() {
      loader.load('../img/chess.png', function (texture) {

        // 我们需要指定重复方式为两个方向（wrapS和wrapT）都重复
        // ? wrapping 所用的贴图，边长必须是2的次方数 ↓
        // 贴图不一定是要 2 的幂次方的，对 loadTexture 的结果 a，可以设置 a.magFilter = THREE.LinearFilter;
        // a.minFilter = THREE.LinearFilter; 表示差值方式。

        texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
        texture.repeat.set(3, 3);

        let cube = new THREE.Mesh(
            new THREE.CubeGeometry(2, 2, 2),
            new THREE.MeshLambertMaterial({
              map: texture
            })
        );
        scene.add(cube);

        renderer.render(scene, camera);
      })
    }

    gird()
  }
</script>
</body>
</html>